<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import { taskDetails, taskCollection } from '@/api/task'
import TaskDetail from './components/TaskDetail.vue'

const router = useRouter()
const taskId = router.currentRoute.value.params.id

const state: any = reactive({
    item: '',
    status: 0,//收藏
    loading: false
})

// 返回
const leftBack = () => history.back()

const getTaskDetail = async () => {
    state.loading = true
    const res: any = await taskDetails({
        task_id: taskId
    })
    if (res) {
        state.item = res.records[0]
        state.status = res.records[0].status
        state.loading = false
    } else {
        Toast(res.msg)
        state.loading = false
    }
}
getTaskDetail()

// 收藏
const setTaskCollection = async () => {
    state.loading = true
    const res: any = await taskCollection({
        task_id: taskId
    })
    if (res) {
        state.status = res.data.status

    }
    state.loading = false
    Toast(res.msg)
}

// 立即沟通
const gotoMessage = () => {
    router.push('/message/talk/' + state.item.task_id + '/' + state.item.user_id)
}

</script>

<template>
    <van-nav-bar title="任务详情" left-arrow @click-left="leftBack" />
    <TaskDetail :item="state.item" v-if="state.item" />
    <div class="task-detail-footer">
        <van-action-bar-icon :class="state.status == 1 ? 'active' : ''" icon="star-o" text="收藏"
            @click="setTaskCollection" />
        <van-button @click="gotoMessage" type="primary" block>立即沟通</van-button>
    </div>
</template>

<style scoped>
.task-detail-footer {
    display: flex;
    position: fixed;
    left: 0;
    width: 100%;
    align-items: center;
    background: #ffffff;
    bottom: 0;
    padding: 0.64rem 0;
}

.task-detail-footer button {
    margin-right: 0.64rem;
}

.task-detail-footer .active:deep(.van-icon-star-o:before) {
    color: #FE8F27;
}
</style>